<template>
  <div class="sensitive-dashboard">
    <!-- 紧急警报 -->
    <div class="emergency-alert">
      <div class="alert-icon">⚠️</div>
      <div class="alert-content">
        <h3 class="alert-title">紧急警报</h3>
        <p class="alert-desc">检测到 {{ highRiskCount }} 条高风险敏感内容，需要立即关注！</p>
      </div>
    </div>

    <!-- 统计卡片 -->
    <div class="stats-cards">
      <div class="stat-card">
        <div class="stat-item">
          <div class="stat-info">
            <span class="stat-label">总计</span>
            <span class="stat-value">{{ totalCount }}</span>
          </div>
          <div class="stat-icon">📊</div>
        </div>
      </div>

      <div class="stat-card">
        <div class="stat-item">
          <div class="stat-info">
            <span class="stat-label">高风险</span>
            <span class="stat-value high-risk">{{ highRiskCount }}</span>
          </div>
          <div class="stat-icon">🔴</div>
        </div>
      </div>

      <div class="stat-card">
        <div class="stat-item">
          <div class="stat-info">
            <span class="stat-label">中风险</span>
            <span class="stat-value medium-risk">{{ mediumRiskCount }}</span>
          </div>
          <div class="stat-icon">🟡</div>
        </div>
      </div>

      <div class="stat-card">
        <div class="stat-item">
          <div class="stat-info">
            <span class="stat-label">待处理</span>
            <span class="stat-value pending">{{ pendingCount }}</span>
          </div>
          <div class="stat-icon">⏰</div>
        </div>
      </div>

      <div class="stat-card">
        <div class="stat-item">
          <div class="stat-info">
            <span class="stat-label">已解决</span>
            <span class="stat-value resolved">{{ resolvedCount }}</span>
          </div>
          <div class="stat-icon">✅</div>
        </div>
      </div>
    </div>

    <!-- 处理进度 -->
    <div class="progress-card">
      <div class="progress-title">
        <h3>处理进度</h3>
        <p>敏感内容处理完成率</p>
      </div>

      <div class="progress-item">
        <span>整体处理率</span>
        <span class="progress-percent">{{ overallProgress }}%</span>
        <div class="progress-bar-container">
          <div class="progress-bar" :style="{ width: overallProgress + '%' }"></div>
        </div>
      </div>

      <div class="progress-item">
        <span>高风险处理率</span>
        <span class="progress-percent">{{ highRiskProgress }}%</span>
        <div class="progress-bar-container">
          <div class="progress-bar danger" :style="{ width: highRiskProgress + '%' }"></div>
        </div>
      </div>
    </div>

    <!-- 敏感内容列表 -->
    <div class="list-card">
      <div class="list-header">
        <h3>敏感内容列表</h3>
        <p>按状态筛选和管理敏感内容</p>
      </div>

      <div class="status-tabs">
        <button
            v-for="tab in tabs"
            :key="tab.value"
            :class="['tab-button', { active: activeTab === tab.value }]"
            @click="activeTab = tab.value"
        >
          {{ tab.label }}
        </button>
      </div>

      <div class="sensitive-list">
        <div
            v-for="item in filteredItems"
            :key="item.id"
            :class="['sensitive-item', getRiskClass(item.risk)]"
        >
          <div class="item-header">
            <span class="item-id">{{ item.id }}</span>
            <span :class="['tag', 'tag-' + (item.risk === '高风险' ? 'danger' : 'warning')]">
              {{ item.risk }}
            </span>
            <span class="tag tag-info">{{ item.tendency }}</span>
            <span :class="['tag', 'tag-' + getStatusClass(item.status)]">
              {{ item.status }}
            </span>
            <span class="item-time">{{ item.time }}</span>
          </div>

          <div class="item-content">{{ item.content }}</div>

          <div class="item-tags">
            <span v-for="(tag, idx) in item.tags" :key="idx" class="tag tag-danger-light">
              {{ tag }}
            </span>
          </div>

          <div class="item-actions">
            <button
                v-if="item.status === '待处理'"
                class="btn btn-primary"
                @click="markAsViewed(item)"
            >
              标记已查看
            </button>
            <button
                v-if="item.status === '待处理'"
                class="btn btn-danger"
                @click="report(item)"
            >
              上报处理
            </button>
            <button
                v-if="item.status === '已查看'"
                class="btn btn-success"
                @click="markAsResolved(item)"
            >
              标记已解决
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue';

const activeTab = ref('all');

const tabs = [
  { label: '全部', value: 'all' },
  { label: '待处理', value: 'pending' },
  { label: '已查看', value: 'viewed' },
  { label: '已解决', value: 'resolved' },
  { label: '已上报', value: 'reported' }
];

const sensitiveItems = ref([
  {
    id: 'STU003',
    risk: '高风险',
    tendency: '自伤倾向',
    status: '待处理',
    time: '2024-10-02 17:15',
    content: '想要自杀，感觉生活没有意义',
    tags: ['自杀', '生活没有意义'],
  },
  {
    id: 'STU009',
    risk: '高风险',
    tendency: '暴力倾向',
    status: '已上报',
    time: '2024-10-01 23:20',
    content: '想要伤害别人，控制不住自己的情绪',
    tags: ['伤害别人', '控制不住'],
  },
  {
    id: 'STU005',
    risk: '中风险',
    tendency: '学术违规',
    status: '已查看',
    time: '2024-10-02 19:30',
    content: '考试作弊被发现了，会不会被处分？很害怕',
    tags: ['作弊', '处分'],
  },
  {
    id: 'STU012',
    risk: '中风险',
    tendency: '情绪低落',
    status: '已解决',
    time: '2024-10-01 14:20',
    content: '最近总是很难过，不想和任何人说话',
    tags: ['情绪低落', '社交回避'],
  },
]);

// 统计数据
const totalCount = computed(() => sensitiveItems.value.length);
const highRiskCount = computed(() =>
    sensitiveItems.value.filter(item => item.risk === '高风险').length
);
const mediumRiskCount = computed(() =>
    sensitiveItems.value.filter(item => item.risk === '中风险').length
);
const pendingCount = computed(() =>
    sensitiveItems.value.filter(item => item.status === '待处理').length
);
const resolvedCount = computed(() =>
    sensitiveItems.value.filter(item => item.status === '已解决').length
);

// 进度计算
const overallProgress = computed(() => {
  const processed = sensitiveItems.value.filter(
      item => item.status === '已解决' || item.status === '已上报'
  ).length;
  return Math.round((processed / totalCount.value) * 100);
});

const highRiskProgress = computed(() => {
  const highRiskItems = sensitiveItems.value.filter(item => item.risk === '高风险');
  if (highRiskItems.length === 0) return 0;
  const processed = highRiskItems.filter(
      item => item.status === '已解决' || item.status === '已上报'
  ).length;
  return Math.round((processed / highRiskItems.length) * 100);
});

// 过滤列表
const filteredItems = computed(() => {
  if (activeTab.value === 'all') return sensitiveItems.value;

  const statusMap = {
    'pending': '待处理',
    'viewed': '已查看',
    'resolved': '已解决',
    'reported': '已上报'
  };

  return sensitiveItems.value.filter(
      item => item.status === statusMap[activeTab.value]
  );
});

// 工具函数
const getRiskClass = (risk) => {
  return risk === '高风险' ? 'high-risk' : 'medium-risk';
};

const getStatusClass = (status) => {
  const map = {
    '待处理': 'danger',
    '已查看': 'primary',
    '已解决': 'success',
    '已上报': 'info'
  };
  return map[status] || 'default';
};

// 操作方法
const markAsViewed = (item) => {
  item.status = '已查看';
  console.log('标记为已查看：', item);
};

const report = (item) => {
  item.status = '已上报';
  console.log('上报处理：', item);
};

const markAsResolved = (item) => {
  item.status = '已解决';
  console.log('标记为已解决：', item);
};
</script>

<style scoped>
.sensitive-dashboard {
  width: 90%;
  max-width: 1200px;
  margin: 24px auto;
  padding: 16px;
}

/* 紧急警报 */
.emergency-alert {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 20px;
  background: linear-gradient(135deg, #fff3e0 0%, #ffe0b2 100%);
  border-left: 4px solid #ff9800;
  border-radius: 8px;
  margin-bottom: 24px;
  box-shadow: 0 2px 8px rgba(255, 152, 0, 0.1);
}

.alert-icon {
  font-size: 25px;
}

.alert-title {
  font-size: 16px;
  font-weight: 600;
  color: #e65100;
  margin: 0 0 4px 0;
}

.alert-desc {
  font-size: 14px;
  color: #ef6c00;
  margin: 0;
}

/* 统计卡片 */
.stats-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}

.stat-card {
  background: white;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  transition: all 0.3s ease;
}

.stat-card:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
  transform: translateY(-2px);
}

.stat-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.stat-info {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.stat-label {
  font-size: 14px;
  color: #666;
}

.stat-value {
  font-size: 32px;
  font-weight: 600;
  color: #333;
}

.stat-value.high-risk { color: #ff4d4f; }
.stat-value.medium-risk { color: #faad14; }
.stat-value.pending { color: #fa8c16; }
.stat-value.resolved { color: #52c41a; }

.stat-icon {
  font-size: 15px;
  opacity: 0.8;
}

/* 进度卡片 */
.progress-card {
  background: white;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  margin-bottom: 24px;
}

.progress-title h3 {
  font-size: 18px;
  font-weight: 600;
  margin: 0 0 4px 0;
  color: #333;
}

.progress-title p {
  font-size: 14px;
  color: #666;
  margin: 0 0 20px 0;
}

.progress-item {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
}

.progress-item span:first-child {
  font-size: 14px;
  color: #333;
  min-width: 100px;
}

.progress-percent {
  font-weight: 600;
  color: #1890ff;
  min-width: 50px;
  text-align: right;
}

.progress-bar-container {
  flex: 1;
  height: 8px;
  background: #f0f0f0;
  border-radius: 4px;
  overflow: hidden;
}

.progress-bar {
  height: 100%;
  background: linear-gradient(90deg, #1890ff, #36cfc9);
  border-radius: 4px;
  transition: width 0.6s ease;
}

.progress-bar.danger {
  background: linear-gradient(90deg, #ff4d4f, #ff7875);
}

/* 列表卡片 */
.list-card {
  background: white;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.list-header h3 {
  font-size: 18px;
  font-weight: 600;
  margin: 0 0 4px 0;
  color: #333;
}

.list-header p {
  font-size: 14px;
  color: #666;
  margin: 0 0 20px 0;
}

/* 标签页 */
.status-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 24px;
  border-bottom: 2px solid #f0f0f0;
}

.tab-button {
  padding: 10px 20px;
  background: none;
  border: none;
  font-size: 14px;
  color: #666;
  cursor: pointer;
  position: relative;
  transition: all 0.3s ease;
}

.tab-button:hover {
  color: #1890ff;
}

.tab-button.active {
  color: #1890ff;
  font-weight: 600;
}

.tab-button.active::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  right: 0;
  height: 2px;
  background: #1890ff;
}

/* 敏感内容列表 */
.sensitive-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.sensitive-item {
  padding: 20px;
  border-radius: 8px;
  background: #fafafa;
  transition: all 0.3s ease;
}

.sensitive-item:hover {
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

.sensitive-item.high-risk {
  background: rgba(255, 77, 79, 0.05);
  border-left: 4px solid #ff4d4f;
}

.sensitive-item.medium-risk {
  background: rgba(250, 173, 20, 0.05);
  border-left: 4px solid #faad14;
}

.item-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

.item-id {
  font-size: 14px;
  font-weight: 600;
  color: #333;
}

.item-time {
  margin-left: auto;
  font-size: 13px;
  color: #999;
}

.item-content {
  font-size: 15px;
  color: #333;
  line-height: 1.6;
  margin-bottom: 12px;
  padding: 12px 0;
  border-top: 1px dashed #e0e0e0;
  border-bottom: 1px dashed #e0e0e0;
}

.item-tags {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.item-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}

/* 标签 */
.tag {
  display: inline-block;
  padding: 4px 12px;
  font-size: 12px;
  border-radius: 4px;
  font-weight: 500;
}

.tag-danger {
  background: #ff4d4f;
  color: white;
}

.tag-warning {
  background: #faad14;
  color: white;
}

.tag-info {
  background: #e8e8e8;
  color: #666;
}

.tag-primary {
  background: #1890ff;
  color: white;
}

.tag-success {
  background: #52c41a;
  color: white;
}

.tag-danger-light {
  background: #fff1f0;
  color: #ff4d4f;
  border: 1px solid #ffccc7;
}

/* 按钮 */
.btn {
  padding: 8px 16px;
  border: none;
  border-radius: 6px;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.3s ease;
  font-weight: 500;
}

.btn-primary {
  background: #1890ff;
  color: white;
}

.btn-primary:hover {
  background: #40a9ff;
}

.btn-danger {
  background: #ff4d4f;
  color: white;
}

.btn-danger:hover {
  background: #ff7875;
}

.btn-success {
  background: #52c41a;
  color: white;
}

.btn-success:hover {
  background: #73d13d;
}

/* 响应式 */
@media (max-width: 768px) {
  .sensitive-dashboard {
    width: 95%;
    padding: 12px;
  }

  .stats-cards {
    grid-template-columns: repeat(2, 1fr);
  }

  .progress-item {
    flex-wrap: wrap;
  }

  .item-actions {
    flex-direction: column;
  }

  .btn {
    width: 100%;
  }
}
</style>